<template>
    <div class="volumeTrend">
        <div class="topArea">
            <div class="top">
                <ul>
                    <li
                        v-for="(item, index) in businessVolume"
                        :key="index"
                        @click="getVolumData(index, 'top')"
                        :class="[
                            { active: categoryIndex == index },
                            {
                                height30:
                                    !item.thisMonthValueIncrease ||
                                    !item.completeRateIncrease ||
                                    !item.thisMonthValueNet
                            }
                        ]"
                    >
                        <div class="td-info">
                            <div class="td-l">
                                <p class="p1">{{ item.indexName }}</p>
                                <!-- <p class="p2">{{ item.thisMonthValue | thousands }}</p> -->
                            </div>
                            <div class="td-r" :class="'titlebg' + index"></div>
                        </div>
                        <div class="bd">
                            <div class="bd-info">
                                <p class="p1">净增量</p>
                                <p class="p2">{{ item.thisMonthValueNet }}</p>
                            </div>
                            <div class="bd-info">
                                <p class="p1">净增完成率</p>
                                <p class="p2">{{ item.completeRateNet }}</p>
                            </div>
                        </div>
                        <div class="bd">
                            <div class="bd-info">
                                <p class="p1">新增量</p>
                                <p class="p2">
                                    {{ item.thisMonthValueIncrease }}
                                    <!-- <i
                    :class="{
                      up: +item.tbYearIncrease.replace('%', '') > 0,
                      down: item.tbYearIncrease.replace('%', '') < 0,
                    }"
                  ></i> -->
                                </p>
                            </div>
                            <div class="bd-info">
                                <p class="p1">新增完成率</p>
                                <p class="p2">
                                    <!-- <i
                    :class="{
                      up: +item.tbYearIncrease.replace('%', '') > 0,
                      down: item.tbYearIncrease.replace('%', '') < 0,
                    }"
                  ></i> -->
                                    {{ item.completeRateIncrease }}
                                </p>
                            </div>
                        </div>

                        <!-- <div>
              <span class="title" style="width: 100%">{{
                item.indexName
              }}</span>
              <div class="allWidth" v-show="item.thisMonthValueNet">
                <span class="complete fl">净增:</span>
                <span class="numberWidth">{{ item.thisMonthValueNet }}</span>
              </div>
              <div
                class="allWidth"
                v-show="
                  item.thisMonthValueIncrease != null ||
                  item.completeRateIncrease != null
                "
              >
                <span class="complete fl">新增:</span>
                <span class="numberWidth">{{
                  item.thisMonthValueIncrease
                }}</span>
              </div>
            </div> -->
                        <!-- <div>
              <span class="complete">完成率</span>
              <br />
              <span class="numberWidth" v-show="item.completeRateNet">{{
                item.completeRateNet
              }}</span>
              <br v-show="item.completeRateNet" />
              <span class="numberWidth">{{ item.completeRateIncrease }}</span>
            </div> -->
                    </li>
                </ul>
            </div>
        </div>
        <div class="bottomArea">
            <div class="g-wrapper">
                <div class="g-maps">
                    <div
                        style="height: 700px; border-radius: 8px"
                        id="mapViews"
                    ></div>
                    <div class="lineTip">
                        <div class="td">
                            <div class="line1"></div>
                            <p>差</p>
                        </div>
                        <div class="td">
                            <div class="line2"></div>
                            <p>中</p>
                        </div>
                        <div class="td">
                            <div class="line3"></div>
                            <p>好</p>
                        </div>
                    </div>

                    <div class="lineTip2" v-if="jsonSubLayer">
                        <div class="td">
                            <div class="line1"></div>
                            <p>差</p>
                        </div>
                        <div class="td">
                            <div class="line2"></div>
                            <p>中</p>
                        </div>
                        <div class="td">
                            <div class="line3"></div>
                            <p>好</p>
                        </div>
                    </div>

                    <div class="typeArea">
                        <span
                            :key="index"
                            v-for="(it, index) in typeArea"
                            :class="{ act: mapType == index }"
                            @click="handleMapType(it)"
                        >
                            {{ it.name }}
                        </span>
                    </div>
                    <div class="areaTree">
                        <div class="tree">
                            <span @click="handleArea('pro')" class="it">{{
                                province
                            }}</span
                            ><span v-if="city" class="right">></span>
                            <span
                                @click="handleArea('city')"
                                v-if="city"
                                class="it"
                                >{{ city }}</span
                            >

                            <span v-if="street" class="it street"
                                ><span class="right">></span>{{ street }}</span
                            >
                        </div>
                    </div>
                    <div v-if="mapLoading" class="mapLoading">
                        正在玩命加载中...
                    </div>
                </div>
                <div class="g-charts" v-if="refreshFlag">
                    <div
                        class="leftArea"
                        v-show="
                            newLyIncomBarData.yAxis &&
                                newLyIncomBarData.yAxis.length != 0
                        "
                    >
                        <div class="title">
                            {{ reportNetName }}
                            <div class="fr">单位：万户</div>
                        </div>
                        <newlyIncomBar
                            :newLyIncomBarData="newLyIncomBarData"
                            :key="'-' + categoryIndex"
                        ></newlyIncomBar>
                    </div>
                    <div
                        class="rightArea"
                        v-show="
                            volumeIncomeData.yAxis &&
                                volumeIncomeData.yAxis.length != 0
                        "
                        :style="
                            newLyIncomBarData.yAxis &&
                            newLyIncomBarData.yAxis.length == 0
                                ? { width: '100%' }
                                : {}
                        "
                    >
                        <div class="title">
                            {{ reportIncreaseName }}
                            <div class="fr">单位：万户</div>
                        </div>
                        <volumeIncomBar
                            :volumeIncomeData="volumeIncomeData"
                            :key="'+' + categoryIndex"
                        ></volumeIncomBar>
                    </div>
                </div>
            </div>

            <!-- <div
        class="leftArea"
        v-show="newLyIncomBarData.yAxis && newLyIncomBarData.yAxis.length != 0"
        :style="
          volumeIncomeData.yAxis && volumeIncomeData.yAxis.length == 0
            ? { width: '100%' }
            : {}
        "
      >
        <div class="title">
          {{ reportNetName }}
          <div class="fr">单位：万户</div>
        </div>
        <newlyIncomBar
          :newLyIncomBarData="newLyIncomBarData"
          :key="'-' + categoryIndex"
        ></newlyIncomBar>
      </div>
      <div
        class="rightArea"
        v-show="volumeIncomeData.yAxis && volumeIncomeData.yAxis.length != 0"
        :style="
          newLyIncomBarData.yAxis && newLyIncomBarData.yAxis.length == 0
            ? { width: '100%' }
            : {}
        "
      >
        <div class="title">
          {{ reportIncreaseName }}
          <div class="fr">单位：万户</div>
        </div>
        <volumeIncomBar
          :volumeIncomeData="volumeIncomeData"
          :key="'+' + categoryIndex"
        ></volumeIncomBar>
      </div> -->
        </div>
    </div>
</template>

<script>
import volumeAccumIncome from "../echarts/volumeAccumIncome";
import volumeIncomBar from "../echarts/volumeIncomBarNew";
import newlyIncomBar from "../echarts/newlyIncomBarNew";
import { getSessionStorage } from "../../../common/js/storage";

import { $budgetAPI } from "@/api";
import { getCookie } from "@/common/js/cookie";
import $ from "jquery";
export default {
    name: "revenueTrend",
    components: {
        volumeIncomBar,
        newlyIncomBar
    },
    data() {
        return {
            form: {
                areaId: ""
            },
            categoryIndex: 0,
            volumeAccumIncomeData: {},
            volumeIncomeData: {},
            newLyIncomBarData: {},
            structDTOData: [],
            mainDev: [],
            initPam: "",
            reportNetName: "",
            mainDevNetList: [],
            tbIncreaseNetList: [],
            titleNetName: "",
            reportIncreaseName: "",
            mainDevIncreaseList: "",
            tbIncreaseList: "",
            titleIncreaseName: "",
            businessVolume: [],
            refreshFlag: true,

            apiAk: "",
            _map: "",
            typeArea: [
                { name: "本地网", type: 0 },
                { name: "县分", type: 1 }
            ],
            mapType: 0,
            areaColor: [],
            indexCode: "",
            areaLvl: 2,
            province: "浙江",
            city: "",
            mapLoading: false,
            jsonLayer: "",
            jsonSubLayer: "",
            subLayer: "",
            cityId: ""
        };
    },
    created() {},
    async mounted() {
        var that = this;

        this.accountInfo = JSON.parse(getSessionStorage("accountInfo"));
        this.form.areaId = this.accountInfo.areaId;
        this.init();

        that.apiAk = await this.getMapApi();

        that._map = new Ai.Map("mapViews", {
            ak: that.apiAk,
            mapType: "gwc",
            crs: Ai.EPSG3857,
            maxZoom: 9,
            scrollWheelZoom: false
        });
        var maplayer = Ai.TileLayer("http://134.96.249.161:9990/tdtvector");
        that._map.addLayer(
            Ai.TileLayer(
                "http://134.96.249.161:9990/telecomgis/zhejiang_map/server/wmts"
            )
        );
        that._map.addLayer(maplayer);
        that._map.setView([30.270599, 120.166568], 8); //地图定位
    },
    methods: {
        init() {
            this.getMainOperationIncomeData();
            this.getVolumData(0);
        },
        //获取主营数据接口
        getMainOperationIncomeData(index) {
            let token = getCookie("token");
            return new Promise(resolve => {
                $budgetAPI.getMainOperationIncomeData(
                    { token: token, areaId: this.form.areaId },
                    res => {
                        if (res.code == 0) {
                            this.businessVolume = res.content.mainDev;
                            res.content.mainDev.map((item, index) => {
                                if (item.completeRateIncrease !== null) {
                                    item.completeRateIncrease =
                                        item.completeRateIncrease == 0
                                            ? "-"
                                            : item.completeRateIncrease + "%";
                                }
                                if (item.completeRateNet !== null) {
                                    item.completeRateNet =
                                        item.completeRateNet == 0
                                            ? "-"
                                            : item.completeRateNet + "%";
                                }
                            });
                            this.initPam = res.content.mainDev[index].indexCode;
                            this.acctMonth =
                                res.content.acctMonth.substring(0, 4) +
                                "年" +
                                (res.content.acctMonth.substring(4, 5) > 0
                                    ? res.content.acctMonth.substring(4, 5)
                                    : "") +
                                res.content.acctMonth.substring(5, 6) +
                                "月";
                            this.$emit("acctMonthData", this.acctMonth);
                        } else {
                            console.log(res);
                            // this.alertError(res);
                        }
                        resolve(this.initPam);
                    },
                    err => {}
                );
            });
        },
        getVolumData(index, type) {
            var that = this;

            if (type) {
                // that.form.areaId = "1";
                // that.province = "浙江";
                // that.city = "";

                // var obj = {
                //   areaId: that.form.areaId,
                //   areaName: "浙江",
                // };
                // that.$bus.$emit("message", obj);

                that._map.removeLayer(that.jsonLayer);
                that._map.removeLayer(that.jsonSubLayer);
            }

            this.categoryIndex = index;
            this.refreshFlag = false;
            this.getMainOperationIncomeData(index).then(res => {
                let indexCode = res;
                let token = getCookie("token");
                that.indexCode = indexCode;

                $budgetAPI.getMainDevByIndexCode(
                    { token: token, indexCode: indexCode },
                    res => {
                        if (res.code == 0) {
                            this.reportNetName = res.content.reportNetName;
                            this.tbIncreaseNetList =
                                res.content.tbIncreaseNetList;
                            this.titleNetName = res.content.titleNetName;
                            this.reportIncreaseName =
                                res.content.reportIncreaseName;
                            this.tbIncreaseList = res.content.tbIncreaseList;
                            this.titleIncreaseName =
                                res.content.titleIncreaseName;
                            let obj = {
                                xAxis: [],
                                yAxis: [],
                                titleIncreaseName: ""
                            };
                            obj.xAxis = res.content.acctMonths;
                            obj.yAxis = res.content.mainDevIncreaseList;
                            obj.titleIncreaseName =
                                res.content.titleIncreaseName;
                            let obj1 = {
                                xAxis: [],
                                yAxis: [],
                                titleNetName: ""
                            };
                            obj1.xAxis = res.content.acctMonths;
                            obj1.yAxis = res.content.mainDevNetList;
                            obj1.titleNetName = res.content.titleNetName;
                            this.volumeIncomeData = obj;
                            this.newLyIncomBarData = obj1;
                            console.log(this.volumeIncomeData.yAxis);
                            console.log(this.volumeIncomeData.yAxis.length);
                            console.log(this.newLyIncomBarData.yAxis);
                            console.log(this.newLyIncomBarData.yAxis.length);
                            this.$nextTick(() => {
                                this.refreshFlag = true;
                            });
                            console.log(res);
                        } else {
                            console.log(res);
                            // this.alertError(res);
                        }

                        that.getMapIncome(indexCode);
                    },
                    err => {}
                );
            });
        },
        getMapApi() {
            var that = this;
            return new Promise(resolve => {
                $budgetAPI.getMapApi(
                    {},
                    res => {
                        if (res && res.code == 1) {
                            // that.apiAk = res.content;
                            resolve(res.content);
                        } else {
                            resolve(res.content);
                        }
                    },
                    err => {
                        console.log(err);
                    }
                );
            });
        },
        getLayerInfo() {
            var that = this;
            //杭州 2
            var id = that.form.areaId;

            that.mapLoading = true;
            $.ajax({
                type: "GET",
                async: false,
                url: "http://134.96.249.161:9990/gisserver/cite/wfs",
                data: {
                    ak: that.apiAk,
                    service: "WFS",
                    request: "GetFeature",
                    typeName: "cite:GEO_S_AREA",
                    outputformat: "json",
                    cql_filter:
                        that.mapType == 0 ? "PARENT_ID=" + id : "LEVEL_ID=3" //参数过滤,同filter，但是对于大数字不行  LEVEL_ID=3
                },
                success: function(result) {
                    if (result != null) {
                        that.jsonLayer = Ai.GeoJSON(result, {
                            style: function(feature) {
                                return {
                                    color: "#fff",
                                    weight: 1,
                                    fillColor: that.getLayerColor(feature),
                                    fillOpacity: 0.7
                                };
                            }
                        })
                            .bindTooltip(function(layer) {
                                return layer.feature.properties.NAME;
                            })
                            .on("click", function(layer) {
                                if (that.mapType) {
                                    return;
                                }
                                that.mapLoading = true;
                                that._map.removeLayer(that.jsonLayer);
                                var l_layer = layer.layer.feature.properties;
                                var id = l_layer.ID;
                                var city = l_layer.CITY;
                                var name = l_layer.NAME;

                                var areaLevel = l_layer.LEVEL_ID;
                                if (areaLevel > 1) {
                                    that.subLayer = true;
                                } else {
                                    that.subLayer = false;
                                }
                                if (areaLevel == 2) {
                                    that.cityId = id;
                                }
                                if (areaLevel == 3) {
                                    that.street = name;
                                } else {
                                    that.street = "";
                                }
                                console.log("areaLevel", areaLevel);
                                that.city = city;
                                that.form.areaId = id;
                                that.getMapIncome(that.indexCode);
                                // that.getSubLayerInfo(id);
                                that.getMainOperationIncomeData();
                                // pointLayer.clearLayers();
                                var obj = {
                                    areaId: that.form.areaId,
                                    areaName: that.city
                                };
                                that.$bus.$emit("message", obj);
                            });

                        that._map.addLayer(that.jsonLayer);

                        that._map.fitBounds(that.jsonLayer.getBounds());
                        that.mapLoading = false;
                    }
                }
            });
        },
        getLayerColor(feature) {
            var that = this,
                color = "#4f99db",
                colorList = that.areaColor;
            var id = feature.properties.ID;

            for (let i = 0; i < colorList.length; i++) {
                let cur = colorList[i];
                if (cur.areaId == id) {
                    color = cur.color;
                    break;
                }
            }
            return color;
        },
        getSubLayerColor(feature) {
            var id = feature.properties.ID;
            // 差 #f08181, 中 #4f99db  好 #5cccaa
            if (id == 613) {
                return "#5cccaa";
            } else if (id == 447) {
                return "#5cccaa";
            } else if (id == 111) {
                return "#5cccaa";
            } else if (id == 449) {
                return "#f08181";
            } else if (id == 450) {
                return "#f08181";
            } else if (id == 647) {
                return "#f08181";
            } else {
                return "#4f99db";
            }
        },
        getSubLayerInfo(parent_id) {
            var that = this;

            $.ajax({
                type: "GET",
                async: false,
                url: "http://134.96.249.161:9990/gisserver/cite/wfs",
                data: {
                    ak: that.apiAk,
                    service: "WFS",
                    request: "GetFeature", //  GetFeature     GEO_S_AREA
                    typeName: "cite:GEO_S_AREA",
                    outputformat: "json",
                    cql_filter: "PARENT_ID=" + parent_id
                },
                success: function(result) {
                    if (result != null) {
                        // var point;
                        that.mapLoading = false;

                        that.jsonSubLayer = Ai.GeoJSON(result, {
                            style: function(feature) {
                                // console.log(feature.properties.NAME, feature.properties.ID);
                                return {
                                    color: "#fff",
                                    weight: 1,
                                    fillColor: that.getLayerColor(feature),
                                    fillOpacity: 0.7
                                };
                            }
                        }).bindTooltip(function(layer) {
                            return layer.feature.properties.NAME;
                        });

                        that._map.addLayer(that.jsonSubLayer);

                        that._map.setZoom(7);
                        that._map.fitBounds(that.jsonSubLayer.getBounds());

                        // that._map.setView([point._latlng.lng, point._latlng.lat], 8);

                        // console.log(111, point);
                        // that._map.addLayer([116.40411, 39.91511]);
                    }
                }
            });
        },
        handleMapType(it) {
            var that = this;

            if (it.type == that.mapType) {
                return;
            }
            if (that.city && it.type == "1") {
                return;
            }
            that.mapType = it.type;
            that.mapLoading = true;
            that._map.removeLayer(that.jsonLayer);
            that._map.removeLayer(that.jsonSubLayer);
            that.getMapIncome(that.indexCode);
        },
        getMapIncome(indexCode) {
            var that = this;

            $budgetAPI.getMapDev(
                {
                    areaId: that.form.areaId,
                    indexCode: indexCode,
                    isCountry: that.mapType
                },
                res => {
                    if (res.code == 0) {
                        that.areaColor = [];
                        var limit = that.mapType == 0 ? 4 : 31;
                        var bad = res.content.length - limit;

                        res.content.map((it, i) => {
                            if (i < limit - 1) {
                                // god
                                if (that.city) {
                                    // 差 #f08181, 中 #4f99db  好 #5cccaa
                                    it.color = "#5cccaa";
                                } else {
                                    it.color = "#7ad3b8";
                                }
                            } else if (i > bad) {
                                if (that.city) {
                                    it.color = "#f08181";
                                } else {
                                    it.color = "#e6cc8e";
                                }
                            } else {
                                if (that.city) {
                                    it.color = "#4f99db";
                                } else {
                                    it.color = "#56a8dd";
                                }
                            }
                        });
                        that.areaColor = res.content;
                        that.getLayerInfo();
                    }
                },
                err => {
                    // that.getLayerInfo();
                    console.log(err);
                }
            );
        },
        handleArea(val) {
            var that = this;

            if (that.form.areaId == "1") {
                return;
            }
            if (val == "city" && !that.street) {
                return;
            }

            that._map.removeLayer(that.jsonSubLayer);
            that._map.removeLayer(that.jsonLayer);
            that.jsonSubLayer = "";

            if (val == "pro") {
                that.form.areaId = "1";
                that.city = "";
                var obj = {
                    areaId: that.form.areaId,
                    areaName: "浙江"
                };
                that.$bus.$emit("message", obj);
                that.subLayer = false;
            } else if (val == "city") {
                that.form.areaId = that.cityId;
                that.street = "";
                var obj = {
                    areaId: that.form.areaId,
                    areaName: that.city
                };
                that.$bus.$emit("message", obj);
                that.subLayer = false;
            }
            that.mapLoading = true;
            that.getMainOperationIncomeData();
            that.getMapIncome(that.indexCode);
        }
    }
};
</script>

<style lang="scss" scoped>
.volumeTrend {
    .topArea {
        ul {
            display: flex;
            padding-left: 15px;
            padding-top: 5px;
            li {
                flex: 1;
                padding: 15px 30px 25px;
                background-color: #fff;
                border-radius: 5px;
                font-size: 14px;
                cursor: pointer;
                box-shadow: 0 10px 10px 1px rgba(0, 0, 0, 0.15);
                margin-right: 20px;
                transition: all .4s ease;
                &:last-child() {
                    margin-right: 0;
                }
                .td-info {
                    display: flex;
                    align-items: center;
                    .td-l {
                        flex: 1;
                        .p1 {
                            font-size: 14px;
                            color: #6a7da3;
                        }
                        .p2 {
                            font-size: 16px;
                            font-weight: bold;
                        }
                    }
                    .titlebg0 {
                        width: 45px;
                        height: 40px;
                        background: url("~@/assets/images/common/type-v1.png")
                            no-repeat;
                        background-size: contain;
                    }
                    .titlebg1 {
                        width: 45px;
                        height: 40px;
                        background: url("~@/assets/images/common/type-v2.png")
                            no-repeat;
                        background-size: contain;
                    }
                    .titlebg2 {
                        width: 45px;
                        height: 40px;
                        background: url("~@/assets/images/common/type-v3.png")
                            no-repeat;
                        background-size: contain;
                    }
                    .titlebg3 {
                        width: 45px;
                        height: 40px;
                        background: url("~@/assets/images/common/type-v4.png")
                            no-repeat;
                        background-size: contain;
                    }
                    .titlebg4 {
                        width: 45px;
                        height: 40px;
                        background: url("~@/assets/images/common/type-v5.png")
                            no-repeat;
                        background-size: contain;
                    }
                    .titlebg5 {
                        width: 45px;
                        height: 40px;
                        background: url("~@/assets/images/common/type-v6.png")
                            no-repeat;
                        background-size: contain;
                    }
                }
                .bd {
                    margin-top: 25px;
                    display: flex;
                    align-items: center;
                    .bd-info {
                        flex: 1;
                        .p1 {
                            font-size: 12px;
                            color: #7183a8;
                        }
                        .p2 {
                            margin-top: 10px;
                            font-size: 14px;
                            font-weight: bold;
                            color: #292f3b;
                        }
                        .up {
                            width: 0;
                            height: 0;
                            border-width: 0 7px 7px;
                            border-style: solid;
                            border-color: transparent transparent #32c328;
                            display: inline-block;
                            vertical-align: 3px;
                            margin-left: 15px;
                        }
                        .down {
                            width: 0;
                            height: 0;
                            border-width: 7px 7px 0;
                            border-style: solid;
                            border-color: #e8404f transparent transparent;
                            display: inline-block;
                            vertical-align: 3px;
                            margin-left: 15px;
                        }
                    }
                }
                &:hover {
                     transform: translateY(5px);
                }
                &.active, &:hover {
                    background-image: linear-gradient(
                        to bottom right,
                        #4ae3ff,
                        #42adfd
                    );
                    color: #fff;
                    box-shadow:  0 0 15px 3px rgba(66, 173, 253, 0.3);
                    .titlebg0 {
                        width: 45px;
                        height: 40px;
                        background: url("~@/assets/images/common/type-vh1.png")
                            no-repeat;
                        background-size: contain;
                    }
                    .titlebg1 {
                        width: 45px;
                        height: 40px;
                        background: url("~@/assets/images/common/type-vh2.png")
                            no-repeat;
                        background-size: contain;
                    }
                    .titlebg2 {
                        width: 45px;
                        height: 40px;
                        background: url("~@/assets/images/common/type-vh3.png")
                            no-repeat;
                        background-size: contain;
                    }
                    .titlebg3 {
                        width: 45px;
                        height: 40px;
                        background: url("~@/assets/images/common/type-vh4.png")
                            no-repeat;
                        background-size: contain;
                    }
                    .titlebg4 {
                        width: 45px;
                        height: 40px;
                        background: url("~@/assets/images/common/type-vh5.png")
                            no-repeat;
                        background-size: contain;
                    }
                    .titlebg5 {
                        width: 45px;
                        height: 40px;
                        background: url("~@/assets/images/common/type-vh6.png")
                            no-repeat;
                        background-size: contain;
                    }

                    .td-l {
                        .p1 {
                            color: #fff;
                        }
                    }
                    .bd-info {
                        .p1 {
                            color: #fff;
                        }
                        .p2 {
                            color: #fff;
                        }
                        .up {
                            border-color: transparent transparent #fff;
                        }
                        .down {
                            border-color: #fff transparent transparent;
                        }
                    }
                }
            }
        }
    }
    .bottomArea {
        // display: flex;
        // height: 380px;
        position: relative;

        .g-wrapper {
            margin-top: 25px;
            display: flex;
            height: 740px;
            padding: 15px;
            .g-maps {
                flex: 1;
                height: 730px;
                max-width: 600px;
                margin-right: 15px;
                position: relative;
                .areaTree {
                    position: absolute;
                    left: 15px;
                    top: 5px;
                    z-index: 2;
                    .el-cascader {
                        width: 100px;
                    }
                    .tree {
                        display: flex;
                        align-items: center;
                        background: #62769f;
                        height: 35px;
                        line-height: 35px;
                        padding: 0 8px;
                        border-bottom-left-radius: 8px;
                        border-bottom-right-radius: 8px;
                        .it {
                            color: #fff;
                            font-size: 12px;
                            cursor: pointer;
                            position: relative;
                        }
                        .right {
                            color: #fff;
                            margin: 0 6px;
                        }
                        .city {
                            &::after {
                                // position: absolute;
                                // top: 50%;
                                // right: 0;
                                display: inline-block;
                                content: "";
                                color: #fff;
                                width: 0;
                                height: 0;
                                border-width: 4px 4px 0;
                                border-style: solid;
                                border-color: #fff transparent transparent;
                                display: inline-block;
                                vertical-align: 3px;
                                margin-left: 3px;
                            }
                        }
                    }
                }

                .lineTip {
                    position: absolute;
                    right: 15px;
                    bottom: 65px;
                    display: flex;
                    z-index: 2;
                    .td {
                        display: block;
                        float: left;
                        p {
                            text-align: center;
                        }
                        .line1 {
                            width: 60px;
                            height: 8px;
                            background-color: #e6c28e;
                            border-top-left-radius: 8px;
                            border-bottom-left-radius: 8px;
                        }
                        .line2 {
                            width: 60px;
                            height: 8px;
                            background-color: #56a8dd;
                        }
                        .line3 {
                            width: 60px;
                            height: 8px;
                            background-color: #7ad3b8;
                            border-top-right-radius: 8px;
                            border-bottom-right-radius: 8px;
                        }
                    }
                }

                .lineTip2 {
                    position: absolute;
                    right: 15px;
                    bottom: 65px;
                    z-index: 2;
                    .td {
                        display: block;
                        float: left;
                        p {
                            text-align: center;
                        }
                        // 差 #f08181, 中 #4f99db  好 #5cccaa
                        .line1 {
                            width: 60px;
                            height: 8px;
                            background-color: #f08181;
                            border-top-left-radius: 8px;
                            border-bottom-left-radius: 8px;
                        }
                        .line2 {
                            width: 60px;
                            height: 8px;
                            background-color: #4f99db;
                        }
                        .line3 {
                            width: 60px;
                            height: 8px;
                            background-color: #5cccaa;
                            border-top-right-radius: 8px;
                            border-bottom-right-radius: 8px;
                        }
                    }
                }
                .typeArea {
                    position: absolute;
                    right: 15px;
                    top: 5px;
                    display: flex;
                    z-index: 2;
                    border: 1px solid #62769f;
                    border-radius: 4px;
                    width: 120px;
                    height: 30px;
                    align-items: center;
                    background-color: #fff;
                    color: #62769f;
                    span {
                        height: 28px;
                        line-height: 28px;
                        flex: 1;
                        font-size: 14px;
                        cursor: pointer;
                        text-align: center;
                    }
                    .act {
                        background-color: #62769f;
                        color: #fff;
                    }
                }
                .mapLoading {
                    position: absolute;
                    top: 0;
                    left: 0;
                    width: 100%;
                    height: 100%;
                    background: url("~@/assets/images/common/loading3.gif") 50%
                        no-repeat rgba(255, 255, 255, 0.5);
                    z-index: 2;
                    color: #333;
                    text-align: center;
                    padding-top: 400px;
                }
            }
            .g-charts {
                flex: 1;
                .title {
                    font-size: 14px;
                    font-weight: bold;
                }
            }
        }
        .leftArea {
            // width: 50%;
            height: 380px;
            position: relative;
            .title {
                position: relative;
                top: 20px;
                color: #000;
                font-size: 14px;
                font-weight: 700;
                .fr {
                    font-weight: normal;
                }
            }
            .income {
                padding: 5px 10px;
                background: #f2f3f7;
                border-radius: 50px;
                position: absolute;
                left: 0;
                top: 40%;
            }
            .yearOnYear {
                padding: 5px 10px;
                background: #f2f3f7;
                border-radius: 50px;
                position: absolute;
                right: 0px;
                top: 48%;
            }
        }
        // .rightArea{
        //   width: 0;
        // }
        .rightArea {
            // width: 50%;
            position: relative;
            height: 380px;
            margin-left: 30px;
            &.active {
                width: 0;
                display: none;
            }
            .title {
                position: relative;
                top: 20px;
                color: #000;
                font-size: 14px;
                font-weight: 700;
                .fr {
                    font-weight: normal;
                }
            }
        }
    }
}
</style>
